<script setup lang="ts">
defineOptions({name:'loginPage'})
import {login}  from '../../api/user'
import type {ILoginParams} from '../../types/data'
import {ref} from 'vue'
import {showToast} from 'vant'
import useTokenStore from '@/stores/token';
const {setToken} = useTokenStore()
import router from '@/router'
const loginForm = ref<ILoginParams>({
  username:'',
  password:''
})
const loginAPI = async(val:ILoginParams) => {
  try{
    const res =await login(val)
    // console.log(res.data.token);
    setToken(res.data.token)
    showToast('登录成功')
    router.push('/')
  }catch(err){
    console.log(err)
  }
}
</script>
<template>
  <van-nav-bar title="登录"></van-nav-bar>
 <van-form @submit="loginAPI">
  <van-cell-group inset>
    <van-field
      name="username"
      label="用户名"
      v-model="loginForm.username"
      placeholder="用户名"
      :rules="[
        { required: true, message: '请填写用户名' },
        { pattern: /^\w{6,16}$/, message: '用户名格式错误'}
        ]"
    />
    <van-field
      type="password"
      name="password"
      label="密码"
      v-model="loginForm.password"
      placeholder="密码"
      :rules="[
      { required: true, message: '请填写密码' },
      { pattern: /^\w{6,16}$/, message: '密码格式错误'}]"
    />
  </van-cell-group>
  <div style="margin: 16px;">
    <van-button round block type="primary" native-type="submit">
      登录
    </van-button>
  </div>
  <van-row justify="end">
    <router-link class="link" to="/register">注册账号</router-link>
  </van-row>
  
</van-form>

</template>

<style lang="scss" scoped>
  .link {
  color: #069;
  font-size: 12px;
  padding-right: 20px;
}
</style>